<template>
  <div class="letfMenu">
    <el-menu
      :default-active="defaultActive"
      router
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <template v-for="item in menuList" >
         <el-submenu :index=item.route :key="item.route" v-if="item.children && item.children.length>0">
          <template slot="title">
            <i :class=item.icon></i>
            <span>{{item.name}}</span>
          </template>
          <el-menu-item-group>
            <template v-for="subitem in item.children">
              <el-menu-item :index="subitem.route" :key="subitem.route">{subitem.name}}</el-menu-item>
            </template>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item :index=item.route :key="item.route" v-else>
          <i :class=item.icon></i>
          <span>{{item.name}}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>

export default {
  name:"letfMenu",
  components: {},
  props:{},
  data(){
    return {
      menuList:[
        {
          name: "投资管理",
          icon: "el-icon-notebook-2",
          route: "/investMgmt"
        },
        {
          name: "投资报告",
          icon: "el-icon-pie-chart",
          route: "/about"
        }
      ]
    }
  },
  computed:{
    defaultActive(){
      return this.$route.fullPath
    }
  },
  mounted() {},
  methods:{
    handleOpen(){},
    handleClose(){}
  }

}
</script>
<style scoped lang="less">
.letfMenu{
  width: 100%;
  height: 100%;
  background: #fff;
}
</style>